<template>
    <div>
        <div class="bigPhoto">
            <div class="photoContent">
                <li>{{value.name}}</li>
                <li style="padding-left:4px">{{value.major}}</li>
            </div>
        </div>
        <div class="change">
            <div :class="this.shows == 1?'beClicked':''" @click="showFir()" style="padding-bottom: 2px;">个人信息</div>
            <div :class="this.shows == 2?'beClicked':''" @click="showSec()" style="padding-bottom: 2px;">个人奖惩</div>
        </div>
        <div class="content">
            <van-collapse v-model="activeName" accordion v-if="this.shows == 1">
              <van-collapse-item title="标题1" name="1">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.name"
                        name="awardUnit"
                        maxlength="50"
                        label="姓名"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入姓名"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请填写自己的姓名
              </van-collapse-item>
              <van-collapse-item title="标题1" name="2">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.gender"
                        name="awardUnit"
                        maxlength="50"
                        label="性别"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入性别"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请填写自己的性别(男/女)
              </van-collapse-item>
              <van-collapse-item title="标题1" name="3">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.political_outlook"
                        name="awardUnit"
                        maxlength="50"
                        label="政治面貌"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入政治面貌"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请选填写自己的政治面貌(党员/群众/共青团员)
              </van-collapse-item>
              <van-collapse-item title="标题1" name="4">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.major"
                        name="awardUnit"
                        maxlength="50"
                        label="专业"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入专业"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请填写自己的专业(汽车服务工程)
              </van-collapse-item>
              <van-collapse-item title="标题1" name="5">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.class"
                        name="awardUnit"
                        maxlength="50"
                        label="班级"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入班级"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请填写自己的班级(汽车182)
              </van-collapse-item>
              <van-collapse-item title="标题1" name="6">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.number"
                        name="awardUnit"
                        maxlength="50"
                        label="学号"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入学号"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请填写自己的学号
              </van-collapse-item>
              <van-collapse-item title="标题1" name="7">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.phone"
                        name="awardUnit"
                        maxlength="50"
                        label="手机号"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入手机号"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请填写自己的十一位手机号
              </van-collapse-item>
              <van-collapse-item title="标题1" name="8">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.nation"
                        name="awardUnit"
                        maxlength="50"
                        label="民族"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入民族"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请填写自己的民族(汉族)
              </van-collapse-item>
              <van-collapse-item title="标题1" name="9">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.committee"
                        name="awardUnit"
                        maxlength="50"
                        label="班委"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入班委"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请填写班委职务(班长)，不是填无
              </van-collapse-item>
              <van-collapse-item title="标题1" name="10">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.student_union"
                        name="awardUnit"
                        maxlength="50"
                        label="学生会"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入学生会"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请填写学生会职务(文体部部长)，没有职务填无
              </van-collapse-item>
              <van-collapse-item title="标题1" name="11">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.state"
                        name="awardUnit"
                        maxlength="50"
                        label="状态"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入状态"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                请填写一种 "在校" "" "" ""
              </van-collapse-item>
              <van-collapse-item title="标题1" name="12">
                <template #title>
                  <!-- <div @click="secShowName = true"> -->
                    <van-field
                        :readonly="!isStart"
                        v-model="value.team"
                        name="awardUnit"
                        maxlength="50"
                        label="球队"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入球队"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                  <!-- </div> -->
                </template>
                请选填一种自己所在机电院下球队(男篮/女篮/男足/女足)
              </van-collapse-item>
              <van-collapse-item title="标题1" name="13">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.vx"
                        name="awardUnit"
                        maxlength="50"
                        label="微信"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入微信"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                自己的微信号
              </van-collapse-item>
              <van-collapse-item title="标题1" name="14">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.qq"
                        name="awardUnit"
                        maxlength="50"
                        label="QQ"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入QQ"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                自己的扣扣号
              </van-collapse-item>
              <van-collapse-item title="标题1" name="15">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.dormitory"
                        name="awardUnit"
                        maxlength="50"
                        label="寝室"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入寝室"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                自己的宿舍号(5#2011)
              </van-collapse-item>
              <van-collapse-item title="标题1" name="16">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.watchman_name"
                        name="awardUnit"
                        maxlength="50"
                        label="监护人姓名"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入监护人姓名"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                监护人姓名
              </van-collapse-item>
              <van-collapse-item title="标题1" name="17">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.watchman_relationship"
                        name="awardUnit"
                        maxlength="50"
                        label="监护人关系"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入监护人关系"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                监护人关系(父子)
              </van-collapse-item>
              <van-collapse-item title="标题1" name="18">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.watchman_phone"
                        name="awardUnit"
                        maxlength="50"
                        label="监护人手机号"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入监护人手机号"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                监护人十一位手机号
              </van-collapse-item>
              <van-collapse-item title="标题1" name="19">
                <template #title>
                    <van-field
                        :readonly="!isStart"
                        v-model="value.year"
                        name="awardUnit"
                        maxlength="50"
                        label="毕业时间"
                        rows="1"
                        autosize
                        type="textarea"
                        placeholder="请输入毕业时间"
                        style="padding: 0"
                        :rules="[{ required: true }]"
                    />
                </template>
                2018级(包括专升本)的毕业时间是2022
              </van-collapse-item>
              <div class="bottom">
                    <van-button @click="clickChange()" size="normal" type="primary">修改</van-button>
                    <van-button @click="clickSave" size="normal" type="info">保存</van-button>
              </div>
            </van-collapse>
            <!-- 选择器2
            <van-action-sheet
                close-on-click-action
                v-model="secShowName"
                :actions="secItem.secItemCloumn"
                @select="SecOnSelect"
            /> -->


            <van-cell-group v-if="this.shows == 2" class="need">
                <van-cell is-link title="荣誉" @click="show = true" />
                <van-action-sheet v-model="show" title="荣誉">
                  <div class="content">
                    <van-cell v-for="item in list" :key="item" :title="item" />
                  </div>
                </van-action-sheet>
                <van-cell is-link title="奖学金" @click="show1 = true" />
                <van-action-sheet v-model="show1" title="奖学金">
                  <van-cell v-for="item in list" :key="item" :title="item" />
                </van-action-sheet>
                <van-cell is-link title="惩罚" @click="show2 = true" />
                <van-action-sheet v-model="show2" title="惩罚">
                  <van-cell v-for="item in list" :key="item" :title="item" />
                </van-action-sheet>
                <van-field readonly v-model="timePoint" label="平时积分" placeholder="平时积分" />
            </van-cell-group>
        </div>
    </div>
</template>
<script>
import { addStudent } from "../../../api/common.js";
export default {
  data() {
    return {
     shows:1,
     value:{'name':'','gender':'','political_outlook':'','major':'','class':'','number':'','phone':'','nation':'',
     'committee':'','student_union':'','team':'','vx':'','qq':'','dormitory':'','watchman_name':'','watchman_relationship':'','watchman_phone':'','year':''},
     timePoint:'',
     show:false,
     show1:false,
     show2:false,
     list: [1,2,3,4,5,6,7,8,9],
     finished: false,
     isStart: false,
     //备注
     message:"1111",
     message1:"",
     activeName: '1',
     secShowName: false,
    //  // 选择器2
    // secItem: {
    //     secItemName: "获奖类别",
    //     secItemMessage:
    //         "获奖类别请选填“美术作品类、音乐表演类、音乐作品类、运动竞赛类”",
    //     secItemCloumn: [],
    // },
    };
  },
  created() {
    // this.$toast.loading({
    //     duration: 2000,
    //     message: "加载中",
    //     forbidClick: true,
    // });
  },
  activated() {
    
  },
  methods: {
    showFir:function(){
        this.shows = 1; 
    },
    showSec:function(){
        this.shows = 2; 
    },
    // onLoad() {
    // // 异步更新数据
    // // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1);
    //     }
    //     // 数据全部加载完成
    //     if (this.list.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 1000);
    // },
    clickChange:function(){
        this.isStart = true;
    },
    clickSave:function(){
        this.isStart = false;
        this.$toast.loading({
            duration: 2000,
            message: "保存中",
            forbidClick: true,
        });
        console.log(this.value,"保存的对象")
        addStudent(this.value)
        .catch((res) => {
            this.$toast.clear();
            this.$toast.fail({
                message: "保存失败\n请重试",
                forbidClick: true,
            });
        });
        this.$toast.clear();
    }
  },
};
</script>
<style scoped>
.need .content{
    padding: 16px 16px 160px;
}
.bigPhoto{
    width: 100%;
    height: 200px;
    background-color: rgb(22, 3, 3);
    color: white;
}
.bigPhoto li{
    list-style: none;
}
.photoContent{
    display: flex;
    flex-direction: column;
    padding-top: 129px;
    padding-left: 10px;
}
.photoContent li:nth-child(1){
    margin-bottom: 10px;
    padding-left: 4px;
    font-size: 18px;
}
.photoContent li:nth-child(2){
    width: 113px;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #dad4d4;
    background-color: white;
    color: gray;
    font-size: 14px;
}
.change{
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    margin: 8px 0;
}
.beClicked{
    border-bottom: solid;
}
.bottom{
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    margin: 10px 0;
}
.bottom .van-button{
    width: 90px;
    height: 32px;
}
.content .van-collapse .van-collapse-item /deep/  .van-cell{
  background-color: none;
}
</style>
